<template>
  <div class="negative-gas-wrap">
    <Dropdown trigger="click" placement="bottom-start" @on-click="handleChangeFunc">
      <Button type="info" size="small" :disabled="!showBtn">
        负用气
        <Icon type="ios-arrow-down"></Icon>
      </Button>
      <DropdownMenu slot="list">
        <DropdownItem v-for="item in showList" :name="item.value" :key="item.value">{{ item.label }}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <!-- 异常诊断 -->
    <Modal
      class="modal-p10"
      v-model="yczdVisibile"
      :title="selectedCandlSerie + ' 异常诊断'"
      width="400"
      :styles="{ height: '50%' }"
    >
      <use-gas-law :content="abnormalList" />
    </Modal>

    <!-- 小时用气曲线 -->
    <Modal
      v-model="xxygqxVisible"
      :title="selectedCandlSerie + ' 小时用气曲线'"
      width="96%"
      :styles="{ top: '30px', height: '85%' }"
      @on-cancel="handleXsyqqxCancel"
    >
      <div :is="xxyqquTpl" :chartData="xxyqqxData" />
      <div slot="footer">
        <Button type="primary" @click="handleXsyqqxCancel">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import { mainMixins, yczdMixins, xsyqqxMixins } from '../mixins'
import UseGasLaw from '../UseGasLaw'

const { mapState, mapActions } = createNamespacedHelpers('historyVerify')

export default {
  name: 'history-verify-negative-gas',
  mixins: [mainMixins, yczdMixins, xsyqqxMixins],
  components: {
    UseGasLaw,
    ELine: () => import('@/commons/charts/ELine')
  },
  data() {
    return {
      funcToolList: {
        ljfyc: this.handleNearAnomaly,
        hyljfyc: this.handleNearAnomalyCancel,
        yczd: this.handleYczd,
        xsyqqx: this.handleXsyqqx
      }
    }
  },
  computed: {
    ...mapState([
      'hasNearAnomaly',
      'selectedCandlSerie',
      'nearAnomalyTimeList',
      'abnormalList'
    ]),
    toolList() {
      return [
        {
          label: '临近负异常',
          value: 'ljfyc',
          active: !this.hasNearAnomaly
        },
        {
          label: '还原临近负异常',
          value: 'hyljfyc',
          active: this.hasNearAnomaly
        },
        {
          label: '异常诊断',
          value: 'yczd',
          active: true
        },
        {
          label: '小时用气曲线',
          value: 'xsyqqx',
          active: true
        }
      ]
    }
  },
  methods: {
    ...mapActions([
      'changeHasNearAnomaly',
      'loadAbnormalData'
    ]),
    handleNearAnomaly() {
      if (this.nearAnomalyTimeList.length > 1) {
        this.changeHasNearAnomaly(true)
      } else {
        this.$Notice.warning({
          title: '操作提示',
          desc: '没有可操作的数据'
        })
      }
    },
    handleNearAnomalyCancel() {
      this.changeHasNearAnomaly(false)
    }
  }
}
</script>
<style lang="less">

</style>
